<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>十寨沟喜来登大酒店首页</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <style>
        body {
            margin-right: 45px;
            margin-left: 45px;
        }
        
        #innerHeader {
            margin-top: 25px;
            margin-bottom: 25px;
        }
    </style>
</head>

<body bgcolor="#2F4056">

    <!-- layer form -->
    <div id="layerForm" style="display: none;line-height: 20px; background-color: #393D49; color: #fff; ">
        <form action="#">
            <div style="background-color: #4476A7;color: #fff9ec; padding : 50px">
                <h1 style="font-size: 45px; text-align: center"> 查询可供应客房 </h1><br>
                <h2 style="font-size: 15px;text-align: center"> 十寨沟喜来登国际大酒店为您提供最贴心的服务</h2>
            </div>
            <div class="layui-form" style="padding-top: 30px;padding-bottom: 10px">
                <div class="layui-form-item" align="center">
                    <div class="layui-inline">
                        <label class="layui-form-label"> 入住 </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="checkIn" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"> 退房 </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="checkOut" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" align="center">
                    <div class="layui-inline">
                        <label class="layui-form-label">客房类型</label>
                        <div class="layui-input-inline" style="color:#696969">
                            <select name="room" lay-verify="required">
                            <option value="0">总统套房</option>
                            <option value="1">豪华双床房</option>
                            <option value="2">标准大床房</option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客房数量</label>
                        <div class="layui-input-inline" style="color:#696969">
                            <select name="num" lay-verify="required">
                            <option value="1"> 1 间</option>
                            <option value="2"> 2 间</option>
                            <option value="3"> 3 间</option>
                            <option value="4"> 4 间</option>
                            <option value="5"> 5 间</option>
                            <option value="6"> 6 间</option>
                            <option value="7"> 7 间</option>
                            <option value="8"> 8 间</option>
                            <option value="9"> 9 间</option>
                            <option value="10"> 10 间</option>
                        </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" align="center">
                    <div class="layui-inline">
                        <label class="layui-form-label">每房成人数</label>
                        <div class="layui-input-inline" style="color:#696969">
                            <select name="adultNum" lay-verify="required">
                            <option value="1"> 1 位 </option>
                            <option value="2"> 2 位 </option>
                            <option value="3"> 3 位 </option>
                            <option value="4"> 4 位 </option>
                            <option value="5"> 5 位 </option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">每房儿童数</label>
                        <div class="layui-input-inline" style="color:#696969">
                            <select name="num" lay-verify="required">
                            <option value="0"> 0 位 </option>
                            <option value="1"> 1 位 </option>
                            <option value="2"> 2 位 </option>
                            <option value="3"> 3 位 </option>
                            <option value="4"> 4 位 </option>
                        </select>
                        </div>
                    </div>
                </div>
            </div>
            <!--<label for="username">姓名<input type="text" name="username" id="username"></label>-->
            <!--<button type="submit" >提交</button>-->

            <div class="layui-form-item" align="center" style="padding: 15px">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="formDemo"> 查询 </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg"> 重置 </button>
                    </div>
                </div>
            </div>

            <div style="padding-bottom: 28px ;padding-left:25px">
                <a href="about.html" style="color: aliceblue">
                    <i class="layui-icon" style="font-size: 35px; color: white;">&#xe6af;</i> 为何要选择十寨沟喜来登国际大酒店？
                </a>
                <br><br>
                <a href="service.html" style="color: aliceblue">
                    <i class="layui-icon" style="font-size: 35px; color: white;">&#xe857;</i> 我们有哪些服务设施？
                </a>
                <br><br>
                <a href="service.html" style="color: aliceblue">
                    <i class="layui-icon" style="font-size: 35px; color: white;">&#xe63b;</i> 如何联系我们？
                </a>
            </div>
        </form>
    </div>


    <!--标题栏-->
    <div class="layui-fluid" id="innerHeader">
        <div class="layui-row">
            <!--酒店名-->
            <div class="layui-col-md9">
                <div class="grid-demo grid-demo-bg1">
                    <a href="index.html">
                        <img src="./image/index/sheratonLogo.png" alt="Sheraton"></a>
                </div>
            </div>
            <!--查询客房与登陆-->
            <div class="layui-col-md3">
                <div class="grid-demo">
                    <button data-method="notice" class="layui-btn layui-bg-cyan" id="layerDemo">
                    <i class="layui-icon" style="font-size: 35px; color: white;">&#xe615;</i>
                    查询
                </button>
                    <button class="layui-btn layui-bg-cyan" id="signIn">
                    <i class="layui-icon" style="font-size: 35px; color: white;">&#xe612;</i>
                    登陆
                </button>
                </div>
            </div>
        </div>
    </div>

    <!--导航栏-->
    <div class="layui-nav layui-nav-brief" lay-filter="bar">
        <ul class="layui-nav">
            <li class="layui-nav-item layui-this">
                <a href="index.html">
                    <i class="layui-icon" style="font-size: 25px; color: white;">&#xe62e;</i> 首页 </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon" style="font-size: 22px; color: white;">&#xe64a;</i> 图片 </a>
                <dl class="layui-nav-child">
                    <!-- 二级菜单 -->
                    <dd><a href="bedRoom.html"> 客房 </a></dd>
                    <dd><a href="washRoom.html"> 洗漱间 </a></dd>
                    <dd><a href="hall.html"> 大厅 </a></dd>
                    <dd><a href="restaurant.html"> 餐厅 </a></dd>
                    <dd><a href="activity.html"> 活动场所 </a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="service.html">
                    <i class="layui-icon" style="font-size: 20px; color: white;">&#xe6af;</i> 服务与设施 </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon" style="font-size: 20px; color: white;">&#xe68e;</i> 客房 </a>
                <dl class="layui-nav-child">
                    <!-- 二级菜单 -->
                    <dd><a href="bigRoom.html">总统套房</a></dd>
                    <dd><a href="medium.html">豪华双床房</a></dd>
                    <dd><a href="small.html">标准大床房</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="contact.html">
                    <i class="layui-icon" style="font-size: 20px; color: white;">&#xe609;</i> 联系我们 </a>
            </li>
            <li class="layui-nav-item">
                <a href="about.html">
                    <i class="layui-icon" style="font-size: 20px; color: white;">&#xe600;</i> 关于我们 </a>
            </li>
        </ul>
    </div>

    <!--图集-->
    <div class="layui-carousel" id="pic" align="center">
        <div carousel-item>
            <div><img src="./image/index/hotel.png" height='100%'></div>
            <div><img src="./image/index/hall.png" height='100%'></div>
            <div><img src="./image/index/bedroom.png" height='100%'></div>
            <div><img src="./image/index/bedroom1.png" height='100%'></div>
            <div><img src="./image/index/wash.png" height='100%'></div>
            <div><img src="./image/index/swim.png" height='100%'></div>
            <div><img src="./image/index/swimming.png" height='100%'></div>
            <div><img src="./image/index/rest.png" height='100%'></div>
            <div><img src="./image/index/banquet.png" height='100%'></div>
            <div><img src="./image/index/meeting.png" height='100%'></div>
            <div><img src="./image/index/gym.png" height='100%'></div>
        </div>
    </div>


    <!--介绍-->
    <div class="layui-text">
        <h1>dscd</h1>
        <p>dcds</p>


    </div>




    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'util'], function() {
            var $ = layui.jquery,
                laydate = layui.laydate //日期
                ,
                form = layui.form //表单
                ,
                laypage = layui.laypage //分页
                ,
                layer = layui.layer //弹层
                ,
                table = layui.table //表格
                ,
                carousel = layui.carousel //轮播
                ,
                upload = layui.upload //上传
                ,
                element = layui.element //元素操作
                ,
                util = layui.util; //回到顶部

            //向世界问个好
            layer.msg('Hello World');


            //图片轮播
            var carousel = layui.carousel;
            carousel.render({
                elem: '#pic',
                width: '100%' //设置容器宽度
                    ,
                height: '660px',
                interval: 4000 //自动切换的时间间隔
                    ,
                arrow: 'fade' //始终显示箭头
                    ,
                indicator: 'inside'

            });


            //查询客房触发事件
            var active = {
                notice: function() {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: false //不显示标题栏
                            ,
                        closeBtn: 1,
                        area: ['750px;', '620px'],
                        shade: 0.8,
                        id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            //                    , btn: ['火速围观', '残忍拒绝']
                            //                    , btnAlign: 'c' //按钮居中对齐
                            ,
                        moveType: 1 //拖拽模式，0或者1
                            ,
                        content: $("#layerForm")
                            //                    , success: function (layero) {
                            //                        var btn = layero.find('.layui-layer-btn');
                            //                        btn.find('.layui-layer-btn0').attr({
                            //                            href: 'http://www.layui.com/'
                            //                            , target: '_blank'
                            //                        });
                            //                    }
                    })
                }

            };

            $('#layerDemo').on('click', function() {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

            //入住选择日期
            laydate.render({
                elem: '#checkIn'
            });

            //退房选择日期
            laydate.render({
                elem: '#checkOut'
            });

            //查询监听提交
            form.on('submit(formDemo)', function(data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });



            //固定块
            util.fixbar({
                bar1: '&#xe619;',
                css: {
                    right: 50,
                    bottom: 100
                },
                bgcolor: '#393D49',
                click: function(type) {

                }
            });

        });
    </script>
</body>

</html>